<template>
  <!-- 要求template里面，必须有一个根元素，而且只能有一个根元素 -->
  <div>
    <h2>内容渲染指令</h2>
    <p>{{ uname }}</p>
    <p>{{ uname.toUpperCase() }}</p>
    <p>{{ flag ? '111' : '222' }}</p>
    <p>{{ cc() }}</p>
    <p v-html="info">相当于innerHTML</p>

    <h2>属性绑定指令</h2>
    <img v-bind:src="url" alt="" /> <br />
    <img :src="url" alt="" /> <br />
    <input type="text" :value="uname" placeholder="" />
    <input type="text" :value="uname + ' lisi'" placeholder="" />

    <h2>事件绑定指令</h2>
    <!-- <button v-on:事件名="语句或方法名;">按钮</button> -->
    <button v-on:click="age++">按钮</button>
    <button @click="age++">按钮</button>

    <button @click="aa">点击调用方法</button>
    <button @click="bb(1, 2, $event)">为方法传参</button>
  </div>
</template>

<script>
export default {
  // 这里写Vue代码
  // data/methods/computed/watch/components/created/mounted/.....
  data () {
    return {
      // 所有的数据，都放到这里
      uname: 'zhangsan',
      age: 20,
      flag: true,
      info: '这是一个<strong>优秀</strong>的boy',
      url: 'http://www.itcbc.com:3006/formdata/123.jpg'
    }
  },
  methods: {
    // 所有的方法放到这里
    aa (e) {
      console.log(e.target)
      console.log(1111)
    },
    bb (x, y, e) {
      console.log(x + y)
      console.log(e.target)
    },
    cc () {
      return 12345
    }
  }
}
</script>

<style></style>
